import { useState, useEffect } from "react"
import './css/Aucai.css'

const ASti = ()=>{
    const [sti, setSti] = useState([]);

    useEffect(() => {
        fetch('https:www.h5fd.xyz:2021/test/allsticker')
            .then(res => res.json())
            .then(res => {
                setSti(res);
            })
    }, [])

    console.log(sti);
    return <div className="sucaiContent">
        {
            sti.map((sticker,index)=>{
                var url = `https:www.h5fd.xyz:2021/test/image2/${sticker.sticker_name}`
                return <div key={index} className="sucaiStiItem">
                    <img style={{width:100,height:100}} src = {url} />
                    <ul className="sucaiMess">
                        <li>id：{sticker.sticker_id}</li>
                        <li>名称：{sticker.sticker_name}</li>
                        <li>风格：{sticker.sticker_style}</li>
                        <li>价格：{sticker.sticker_pay}</li>
                    </ul>
                </div>
            })
        }
    </div>
}

const Atem = ()=>{
    const [tem, setTem] = useState([]);

    useEffect(() => {
        fetch('https:www.h5fd.xyz:2021/test/alltemplate')
            .then(res => res.json())
            .then(res => {
                setTem(res);
            })
    }, [])

    console.log(tem);
    return <div className="sucaiContent">
        {
            tem.map((template,index)=>{
                var url = `https:www.h5fd.xyz:2021/test/image/${template.template_cover}`
                return <div key={index} className="sucaiTemItem">
                    <img style={{width:150,height:200}} src = {url} />
                    <ul className="sucaiMess">
                        <li>id：{template.template_id}</li>
                        <li>名称：{template.template_name}</li>
                        <li>风格：{template.template_style}</li>
                        <li>价格：{template.template_pay}</li>
                    </ul>

                </div>
            })
        }
    </div>
}

const Aucai = () => {
    return(
        <div className="allSucai">
            <h1 className="title">模板</h1>
            <Atem />
            <h1 className="title">贴纸</h1>
            <ASti />
        </div>   
    )
}
export default Aucai;